/**
 * 轮播图组件
 */
import React from 'react'
import Taro from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import {moduleUtil} from '@conecli/cone-render/api'
import { LazyLoadImage, ItemViewExposureSmart, CustomScrollView } from '@conecli/cone-render/components'
import bannerStyle from './index.module.scss'

const { windowWidth } = Taro.getSystemInfoSync()
const pxTransformFromData = (num, widthSize = 375, layoutWidth = windowWidth) => {
  const getNum = Number(num)
  return Math.round((getNum / widthSize) * layoutWidth)
}
const Banner = (props) => {
  const { floorData, layoutLeftRightMargin, containerBorderRadius } = props
  const banner = moduleUtil.getDataDefine(floorData, 'bannerData')
  const picList = banner?.data || []

  const layoutWidth = windowWidth - layoutLeftRightMargin
  const changeHeight = pxTransformFromData(
    picList[0]?.h,
    picList[0]?.w,
    layoutWidth,
  )


  const swiperHeightStyle = {
    height: `${changeHeight}px`,
  }
  const swiperBorderRadiusStyle = containerBorderRadius
    ? {
      borderRadius: `${containerBorderRadius}px`,
    }
    : {}

  /**
   * 组合埋点信息，如果链接小工具配置的是跳转商详，需要上报skuid
   * @param item
   * @param index
   */
  const createReportMinfo = (item, index) => {
    const { configDataValue, configDataType } = item
    const getRes: any = {
      jumpUrl: encodeURIComponent(configDataValue?.clickUrl || ''),
      pos: index,
    }
    configDataType === 1 && (getRes.skuid = configDataValue?.skuIds)
    return getRes
  }

  return (
    <View className={bannerStyle['d-banner']} style={swiperHeightStyle}>
      <CustomScrollView scrollX>
        <Swiper
          className={bannerStyle['list']}
          circular
          indicatorDots={picList && picList.length > 1}
          indicatorActiveColor="#fa2c19"
          autoplay={picList && picList.length > 1}
          style={swiperHeightStyle}
        >
          {picList && picList.length > 0 && picList.map((item, index) => {
            return (
              <SwiperItem
                key={index}
                className={bannerStyle['d-item']}
                style={swiperBorderRadiusStyle}
              >
                <ItemViewExposureSmart
                  className={bannerStyle['d-img-wrap']}
                  style={swiperBorderRadiusStyle}
                  reportData={[floorData, createReportMinfo(item?.detail, index), {}]}
                >
                  <LazyLoadImage
                    className={bannerStyle['d-img']}
                    src={item?.imageUrl}
                    lazyLoad={false}
                  />
                </ItemViewExposureSmart>
              </SwiperItem>
            )
          })}
        </Swiper>
      </CustomScrollView>
    </View>
  )
}

export default Banner
